<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
      }
      #box2 {
        padding: 100px;
        background-color: aquamarine;
      }
      #box4 {
        width: 200px;
        height: 300px;
        background-color: #bfa;
        overflow: auto;
      }
      #box5 {
        width: 150px;
        height: 600px;
        background-color: yellow;
      }
    </style>
    <script>
      window.onload = function () {
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        var box4 = document.getElementById("box4");

        btn01.onclick = function () {
          /**
           * clienWidth
           * clienHeight
           *    这两个属性可以获取元素的可见宽度和高度
           *    这些属性都是不带px的，返回的是数字，可以直接计算
           *    会获取元素宽度和高度，包括内容区和内边距
           *    只读 不能修改
           */
          //   alert(box1.clientHeight);
          /** 
          * offsetWidth
          * offsetHeight
                    获取元素的整个宽度和高度。包括内容区，内边距和边框
          */
          /**
           * offsetParent
           * 可以获取当前元素的定位父元素
           * 会获取到当前元素最近的开启了定位的祖先元素
           * 如果所有的祖先元素都没有开启定位，则返回body
           */
          var op = box1.offsetParent;
          //   alert(op);

          /**
           * offsetLeft
           *   当前元素相对于其定位父元素的水平偏移量
           * offsetTop
           *   当前元素相对于其定位父元素的垂直偏移量
           */
          //   alert(box1.offsetLeft);

          /**
           * scollWidth
           * scollHeight
           *   可以获取元素整个滚动区域的高度
           */
          //   alert(box4.clientHeight);

          /**
           * scrllLeft
           *   可以获取水平滚动条滚动的距离
           * scrollTop
           *   可以获取垂直滚动条滚动的距离
           */
          //   alert(box4.scrollLeft);
          //   alert(box4.scrollTop);
          alert(box4.scrollHeight - box4.scrollTop);
        };
      };
    </script>
  </head>
  <body id="body">
    <button id="btn01">点击</button>
    <br /><br />
    <div id="box4">
      <div id="box5"></div>
    </div>
    <div id="box3">
      <div id="box2">
        <div id="box1" style="position: relative"></div>
      </div>
    </div>
  </body>
</html>
